<template>
    <section class="prdListWrap"> 
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" @top-status-change="handleTopChange">
            <ul>
                <li v-for="(item,index) in examlist" :key="index">
                    <div class="list-cell clearfix">
                        <!-- <img :src="item.src" alt="用户头像" class="list-pic fl" /> -->
                        <img src="../assets/images/user.png" alt="用户头像" class="list-pic fl" />
                        <div class="list-left fl" :style="{width: curWidth+'px'}">
                            <p class="main-info">{{item.title}}</p>
                            <p class="auxiliary-info">{{item.name}}</p>
                        </div>
                        <p class="list-info fr">{{item.tel}}</p>
                        <p class="list-sign color-red fr">{{item.fraction}}</p>
                    </div>
                </li>
            </ul>
            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
        </mt-loadmore>
    </section>
</template>
<style>
    .prdListWrap{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        /* height:100%; */
        overflow:auto;
        /* padding-top: 3.7rem; */
        box-sizing:border-box;
        -webkit-overflow-scrolling: touch;
    }
    .list-cell{
        padding: 3px 10px;
        border-bottom: solid 1px #e0e0e0;
        display: flex;
    }
    .list-pic{
        width: 24px;
        height: 24px;
        align-self: center;
    }
    .list-left{
        padding: 0px 5px;
        box-sizing: border-box;
    }
    .list-sign,.list-info{
        line-height: 1.5em;
        align-self: center;
    }
    .list-info{
        color: #666;
        margin-right: 3px;
    }
    .auxiliary-info{
        font-size: 13px;
    }
    
</style>
<script>
    export default {
        name: 'examinee',
        data(){
            return{
                examlist: [
                    {
                        id: 0,
                        name: '张三',
                        tel: '152****0011',
                        fraction: '50分',
                        title:'2018期中考',
                        src: '../assets/images/user.png'                    
                    },
                    {
                        id: 1,
                        name: '李四',
                        tel: '152****0022',
                        fraction: '55分',
                        title:'2018期中考',
                        src: '../assets/images/user.png'                    
                    },
                ],
                curWidth: 0,
                topStatus: '',  // 下拉刷新的状态: pull(下拉) drop(释放) loading(正在加载数据)
                allLoaded: false,
            }
        },
        methods: {
            //初始
            init(){
                //document.body.clientWidth   屏幕宽度
                this.curWidth = document.body.clientWidth - 163;
            },
            handleTopChange(status) {
                console.log('----------status------------',status);
                this.topStatus = status;
            },
            loadTop(){      //  刷新数据
                console.log('----------loadTop-----------');
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom(){     // 加载更多
                console.log('----------loadBottom-----------');
                // this.$refs.loadmore.onBottomLoaded();

                setTimeout(() => {

                    for (let i = 1; i <= 3; i++) {
                        this.examlist.push({
                            id: i,
                            name: '张三',
                            tel: '152****0011',
                            fraction: '50分',
                            title:'2018期中考',
                            src: '../assets/images/user.png'                    
                        },);
                    }
                    this.$refs.loadmore.onBottomLoaded();

                }, 500);

            },

        },
        mounted(){
            this.init();
            document.title = "补考考生";
        },
    }
</script>
